<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>huinan大屏</title>
		<link rel="stylesheet" type="text/css" href="../css5/huinan.css"/>
		<style>
			 @media screen and (max-width: 1440px) {
	  
				  html,
				  body {
					  font-size: 12px;
				  }
				  }
	  
				  @media screen and (min-width: 1441px) and (max-width: 1680px) {
	  
				  html,
				  body {
					  font-size: 12.7px;
				  }
				   .tableList2-container {
				  	height: 47rem;
				  }
				  .content {
				  	height: 75rem;
				  }
				  .circle-right {
				  	padding-top: .7rem;
				  }
				  .bottom {
				  	height: 11rem;
				  }
				  .imgThree {
				  	width: 3rem;
				  	height: 3rem;
				  }
				  .margin {
				  	text-align: center;
				  	margin-top: 1rem;
				  }
				  .a {
				  	margin-left: .3rem;
				  	margin-top: 3rem;
				  }
				  .b {
				  	margin-left: 2.5rem;
				  	margin-top: 3rem;
				  }
				  .c {
					  margin-bottom: .6rem;
				  }
				  }
				 
				  /*.one-span{
				  	font-size: 4px;
				  }*/
				  }
				  
	  
				  @media screen and (min-width: 1681px) and (max-width: 1919px) {
	  
				  html,
				  body {
					  font-size: 16px;
				  }
				  } 
				   @media screen and (min-width: 1670px) and (max-width: 1690px) {
	  
				  html,
				  body {
					  font-size: 14.03px;
				  }
				  }  
	  
				  @media screen and (min-width: 1910px) and (max-width: 1930px) {
	  
				  html,
				  body {
					  font-size: 16px;
				  }
				  .tableList2-container {
				  	height: 32rem;
				  }
				  .content {
				  	height: 62rem;
				  }
				  .bottom {
				  	height: 11rem;
				  }
				  .imgThree {
				  	width: 3.94rem;
				  	height: 3.94rem;
				  }
				  }
				  @media screen and (min-width: 1590px) and (max-width: 1610px) {
	  
				  html,
				  body {
					  font-size: 13.3px;
				  }
				  .tableList2-container {
				  	height: 47rem;
				  }
				  .content {
				  	height: 75rem;
				  }
				  .circle-right {
				  	padding-top: .7rem;
				  }
				  .bottom {
				  	height: 11rem;
				  }
				  .imgThree {
				  	width: 3rem;
				  	height: 3rem;
				  }
				  .margin {
				  	text-align: center;
				  	margin-top: 1rem;
				  }
				  .a {
				  	margin-left: .3rem;
				  	margin-top: 3rem;
				  }
				  .b {
				  	margin-left: 2.5rem;
				  	margin-top: 3rem;
				  }
				  .c {
					  margin-bottom: .6rem;
				  }
				  }
				  
	  
				  /* @media screen and (min-width: 2830px) and (max-width: 2850px) {
	  
				  html,
				  body {
					  font-size: 23.7px;
				  }
				  }
	  
				  @media screen and (min-width: 3830px) and (max-width: 3850px) {
	  
				  html,
				  body {
					  font-size: 32px;
				  }
			  } */
		</style>
	</head>
	<body>
		<div class="app" id="app">
			<div class="header">
				<img class="header-img" src="../huinan/img/header.png" alt="header" />
				<div class="time-all">
					<div class="time">{{time}}</div>
					<div class="time-img"></div>
					<div class="year-all">
						<div class="year">{{years}}</div>
						<div class="week">{{week}}</div>
					</div>
				</div>
			</div>
			<div class="content">
			
				<div class="column-one">
					<ul class="ul-1">
						<li class="li-1">
							<img src="../huinan/img/zhucan.png" alt="zhucan" />
							<div class="title-one">
								<span class="zhucandian">助餐点</span>
							    <div class="zhucan">
								    <div class="shuzi">
								    	{{zhucandian}}<span class="danwei">个</span>
								    </div>
								</div>
							</div>
						</li>
						<li class="li-1">
							<img src="../huinan/img/huodong.png" alt="huodong" />
							<div class="title-one">
								<span class="zhucandian">老年活动室</span>
							    <div class="zhucan">
								    <div class="shuzi">
								    	{{laonianhuodong}}<span class="danwei">个</span>
								    </div>
								    
								</div>
							</div>
						</li>
						<li class="li-1">
							<img src="../huinan/img/fuwu.png" alt="fuwu" />
							<div class="title-one">
								<span class="zhucandian">为老服务单位</span>
							    <div class="zhucan">
								    <div class="shuzi">
								    	{{weilaofuwu}}<span class="danwei">个</span>
								    </div>
								</div>
							</div>
						</li>
						<li class="li-1">
							<img src="../huinan/img/choujian.png" alt="choujian" />
							<div class="title-one">
								<span class="zhucandian">服务单位筹建点</span>
							    <div class="zhucan">
								    <div class="shuzi">
								    	{{fuwudanwei}}<span class="danwei">个</span>
								    </div>
								</div>
							</div>
						</li>
						<li class="li-1">
							<img src="../huinan/img/juweihui.png" alt="juweihui" />
							<div class="title-one">
								<span class="zhucandian">居委会</span>
							    <div class="zhucan">
								    <div class="shuzi">
								    	{{juWei}}<span class="danwei">个</span>
								    </div>
								</div>
							</div>
						</li>
						<li class="li-1">
							<img src="../huinan/img/laoren.png" alt="laoren" />
							<div class="title-one">
								<span class="zhucandian">老人总数</span>
							    <div class="zhucan">
								    <div class="shuzi">
								    	{{oldPeople}}<span class="danwei danwei-last">人</span>
								    </div>
								</div>
							</div>
						</li>
					</ul>
					<div class="map"></div>
				</div>
				<div class="column-two">
					<div class="column-two-one">
						<div class="right-img3"></div>
						<div class="tableList2-container" style="color: #fff;flex: 1;margin-right: 10px; overflow: auto; width: 14.5rem; overflow-x: hidden; margin-top: 1rem;">
							<table style="overflow-y: auto; width: 100%;" border=0 cellpadding="0" cellspacing="0"  class="table-lists"  >
								<thead>
									<tr class="trsss">
										<td width="40%" class="tdss">
											街镇
										</td>
										<td width="40%" class="tdss">
											老人总数
										</td>
										<td width="20%" class="tdss">
											占比
										</td>
									</tr>
								</thead>
								<tbody style="overflow-y: scroll;">
									<tr @click="clickTable(item.code,item.jzname)" v-for="(item,index) of tableList" :key="index" class="trss">
										<td ref="tableList2" class="tdss">
											{{item.jzname}}
										</td>
										<td class="tdss">	
											{{item.oldercount}}
										</td>
										<td class="tdss">
											{{item.proportion}}
										</td>
									</tr>
									</tbody>	
							</table>
						</div>
						<div class="huan-img">
							<div ref="return" @click="returnBack" style="position: absolute;z-index: 1000;background: url('../images/14.png');width: 3.8rem;height: 1.6rem;background-size: 100% 100%;right: 0;bottom: 10%;cursor: pointer;display: none;
"></div>
							<div class="right-img5">{{juweiHeader}}</div>
							<div class="main" id="main" ></div>
							
						</div>
									  <!--<div @click="returnBack" v-show="showss" class="left-img5"></div>-->
					</div>
					<div class="column-two-two">
						<div class="menu">
							
							<div class="circle-right">
								<div class="one-container c">
									<div class="box-one">{{serviceOne.fwtarget}}</div>
									<div class="box-right-one">{{serviceOne.fwname}}</div>
								</div>
								<div class="two-container c">
									<div class="box-two">{{serviceTwo.fwtarget}}</div>
									<div class="box-right-two">{{serviceTwo.fwname}}</div>
								</div>
								<div class="three-container c">
									<div class="box-three">{{serviceThree.fwtarget}}</div>
									<div class="box-right-three">{{serviceThree.fwname}}</div>
								</div>
								<div class="four-container c">
									<div class="box-four">{{serviceFour.fwtarget}}</div>
									<div class="box-right-four">{{serviceFour.fwname}}</div>
								</div>
								<div class="five-container c">
									<div class="box-five">{{serviceFive.fwtarget}}</div>
									<div class="box-right-five">{{serviceFive.fwname}}</div>
								</div>
								<div class="six-container c">
									<div class="box-six">{{serviceSix.fwtarget}}</div>
									<div class="box-right-six">{{serviceSix.fwname}}</div>
								</div>
								<!-- <div class="circle-right">
									<div class="one-container">
										<div class="box-one">才能健康</div>
										<div class="box-right-one">放假快乐的回复肯定会</div>
									</div>
									<div class="two-container">
										<div class="box-two">查看来那个</div>
										<div class="box-right-two">的静安寺路口附近可拉萨爆发式</div>
									</div>
									<div class="three-container">
										<div class="box-three">才不管咔咔李宁枫</div>
										<div class="box-right-three">大健康洛杉矶的卡拉是否回款和立法</div>
									</div>
									<div class="four-container">
										<div class="box-four">差时空裂缝那快递费</div>
										<div class="box-right-four">大健康洛杉矶的卡拉是否回款和立法了解了福建</div>
									</div>
									<div class="five-container">
										<div class="box-five">小骄傲is你分开晾晒</div>
										<div class="box-right-five">大健康洛杉矶的卡拉是否回款和立法了解了福建即可将立刻</div>
									</div>
									<div class="six-container">
										<div class="box-six">房间辣复合肥</div>
										<div class="box-right-six">大健康洛杉矶的卡拉是否回款和立法了解了福建就拦截【看康洛杉矶的卡拉是否回款和</div>
									</div> -->
								
								
							</div>
						</div>
					</div>
				</div>
		    </div>
		    <div class="bottom">
		    	<div class="one b">
		    		<img class="imgThree" src="../huinan/img/one.png" alt="one" />
		    		<span class="one-span margin">歌舞，戏曲小段</span>
		    	</div>
		    	<div class="two a">
		    		<img class="imgThree" src="../huinan/img/two.png" alt="one" />
		    		<span class="two-span margin">说唱，小品</span>
		    	</div>
		    	<div class="three a">
		    		<img class="imgThree" src="../huinan/img/three.png" alt="one" />
		    		<span class="three-span margin">沪剧，舞蹈，锣鼓书等</span>
		    	</div>
		    	<div class="four a">
		    		<img class="imgThree" src="../huinan/img/four.png" alt="one" />
		    		<span class="four-span margin">江南丝竹演奏，唱歌</span>
		    	</div>
		    	<div class="five a">
		    		<img class="imgThree" src="../huinan/img/five.png" alt="one" />
		    		<span class="five-span margin">越剧</span>
		    	</div>
		    	<div class="six a">
		    		<img class="imgThree" src="../huinan/img/six.png" alt="one" />
		    		<span class="six-span margin">沪剧《啊必大》全场</span>
		    	</div>
		    	<div class="seven a">
		    		<img class="imgThree" src="../huinan/img/seven.png" alt="one" />
		    		<span class="seven-span margin">羽毛球知识交流讲座</span>
		    	</div>
		    	<div class="eight a">
		    		<img class="imgThree" src="../huinan/img/eight.png" alt="one" />
		    		<span class="eight-span margin">中国象棋指导交流讲座</span>
		    	</div>
		    	
		    	
		    	<div class="nine a">
		    		<img class="imgThree" src="../huinan/img/nine.png" alt="one" />
		    		<span class="nine-span margin">书法，国画，盆景知识交流讲座</span>
		    	</div>
		    	<div class="ten a">
		    		<img class="imgThree" src="../huinan/img/ten.png" alt="one" />
		    		<span class="ten-span margin">反假人民币宣传讲座</span>
		    	</div>
		    	
		    	
		    	
		    	<div class="eleven a">
		    		<img class="imgThree" src="../huinan/img/eleven.png" alt="one" />
		    		<span class="eleven-span margin">反洗钱宣传讲座</span>
		    	</div>
		    	<div class="twelve a">
		    		<img class="imgThree" src="../huinan/img/twelve.png" alt="one" />
		    		<span class="twelve-span margin">防范电信诈骗安全讲座</span>
		    	</div>
		    	<div class="thirteen a">
		    		<img class="imgThree" src="../huinan/img/thirteen.png" alt="one" />
		    		<span class="thirteen-span margin">防范非法集资安全讲座</span>
		    	</div>
		    	<div class="fourteen a">
		    		<img class="imgThree" src="../huinan/img/fourteen.png" alt="one" />
		    		<span class="fourteen-span margin">银行理财产品宣传讲座</span>
		    	</div>
		    	<div class="fifteen a">
		    		<img class="imgThree" src="../huinan/img/fifteen.png" alt="one" />
		    		<span class="fifteen-span margin">新版社保卡换卡宣传讲座</span>
		    	</div>
		    </div>
		</div>
		
		<script src="../js5/jquery-1.7.min.js"></script>
		<script src="../js5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js5/vue.js"></script>
		<script src="../js5/huinan.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			  // 柱状图
			  //指定图标的配置和数据
			  //////首页柱形图
			  
			  ///// 首页环形图
//		   var myCharts = echarts.init(document.getElementById('main'));
//		   option = {
//		       tooltip: {//提示框，可以在全局也可以在
//		           trigger: 'item',  //提示框的样式
//		           formatter: "{a} <br/>{b}: {c} ({d}%)",
//		           backgroundColor: 'rgba(255,255,255,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
//		      	    borderColor: '#333',  //提示框的背景色
//		           textStyle:{ //提示的字体样式
//		               color:"black",
//		           }
//		       },
//		       legend: {  //图例
//		           orient: 'vertical',  //图例的布局，竖直    horizontal为水平
//		           selectedMode: false,//控制是否可以通过点击图例改变系列的显示状态
//		   		x: '28%',//图例显示在右边
//		   		y: '55%',
//		           data:['60-65岁老人','65-69岁老人','70-79岁老人','80-89岁老人','90-99岁老人','100及以上'],
//		           textStyle:{    //图例文字的样式
//		               color:'#fff',  //文字颜色
//		               fontSize: 14    //文字大小
//		           }
//		       },
//		       series: [
//		           {
//		               name:'老人比例',
//		               type:'pie', //环形图的type和饼图相同
//		               radius: ['30%', '45%'],//饼图的半径，第一个为内半径，第二个为外半径
//		   			center: ['46%','34%'],
//		               avoidLabelOverlap: false,
//		               color:['#D1FBEF','#F9D858','#4CD0DD','#DF86F0','#F5A7C1','#CE764E'],
//		               label: {
//		                   normal: {  //正常的样式
//		                       show: false,
//		                       position: 'left'
//		                   },
////		                    emphasis: { //选中时候的样式
////		                        show: true,
////		                        textStyle: {
////		                            fontSize: '20',
////		                            fontWeight: 'bold'
////		                        }
////		                    }
//		               },  //提示文字
//		               // labelLine: {
//		               //     normal: {
//		               //         show: false
//		               //     }
//		               // },
//		               data:[
//		                   {value:2, name:'60-65岁老人'},
//		                   {value:2, name:'65-69岁老人'},
//		                   {value:4, name:'70-79岁老人'},
//		                   {value:5, name:'80-89岁老人'},
//		   				{value:7, name:'90-99岁老人'},
//		   				{value:1, name:'100及以上'}
//		               ]
//		           }
//		       ]
//		   };
//		   myCharts.setOption(option);
		</script>
	</body>
</html>
